<template>
  <div class="city">
     <div class="left">
       <div>
         <p>热门城市</p>
         <p>
           <span>北京</span>
           <span>上海</span>
           <span>天津</span>
           <span>合肥</span>
           <span>郑州</span>
         </p>
       </div>
     <div  >
       <p >A</p>
       <p>阿克苏</p>
       <p>安康</p>
       <p>安庆</p>
     </div>
     <div>
       <p   >B</p>
       <p>百山</p>
       <p>白城</p>
       <p>宝鸡</p>
     </div>
     <div >      
        <p  >C</p>
       <p>沧州</p>
       <p>长春</p>
       <p>昌吉</p>
     </div>
     <div >
       <p   >D</p>
       <p>大理</p>
       <p>大连</p>
       <p>大庆</p>
     </div>
     <div >
       <p   >E</p>
       <p>鄂尔多斯</p>
       <p>恩斯</p>
       <p>鄂州</p>
      </div>
       <div >      
        <p  >F</p>
       <p>沧州</p>
       <p>长春</p>
       <p>昌吉</p>
     </div>
     <div >
       <p   >G</p>
       <p>大理</p>
       <p>大连</p>
       <p>大庆</p>
     </div>
     <div >
       <p   >H</p>
       <p>鄂尔多斯</p>
       <p>恩斯</p>
       <p>鄂州</p>
      </div>
      </div>
     <div class="right">
       <p @click="showDetails1()">
         A </p>
     <p @click="showDetails2()"> B</p>
     <p @click="showDetails3()"> C</p>
     <p @click="showDetails4()"> D</p>
     <p> E</p>
     <p> F</p>
     <p> G</p>
     <p> H</p>

     </div>
  </div>
</template>

<script>
export default {
  name:'city',
  data(){
        return{
            showIndex:null
        }
    },
  methods:{
       showDetails1() {
        document.body.scrollTop = 200;
        document.documentElement.scrollTop = 200;
    },
      showDetails2() {
        document.body.scrollTop = 320;
        document.documentElement.scrollTop = 320;
    },
    showDetails3() {
        document.body.scrollTop = 440;
        document.documentElement.scrollTop = 440;
    },
    showDetails4() {
        document.body.scrollTop = 560;
        document.documentElement.scrollTop = 560;
    },
    showDetails5() {
        document.body.scrollTop = 680;
        document.documentElement.scrollTop = 680;
    }
  }
     
}
</script>

<style scoped>
a{
  text-decoration: none;
  color:black
}
  .left{
    float: left;
    border-right:1px solid #ccc ;
    width: 90%;
    background-color: #fff5f0;
  }
  .right{
    float: right;
  width: 8%;
    padding-top: 40%;
    position: fixed;
    left: 340px;
  }
  .city{
    overflow: hidden;
    padding-bottom: 50px;
    /* height: 1000px; */
  }
  .left div p:first-child{
      background: #f0f0f0;
  }
  p{
    line-height: 30px;
    padding-left: 10px;
  }
  span{
    background: white;
    border:1px solid #ccc;
    width: 80px;
    height: 32px;
    text-align: center;
    margin: 10px 10px 10px 0;
    display: inline-block;


  }
  .left div:first-child{
    margin-top: 20px;
  }
</style>